﻿import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Layouts 1.1

Rectangle {
    id: rectangle1
    color:"transparent"//Qt.rgba(97/255,178/255,244/255,1)
    anchors.fill: parent
    width: 400
    height: 600
    property int columnWidth: 120

    ColumnLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.topMargin: 20
        spacing: 30

        TextField {
            Layout.row: 1
            implicitWidth: columnWidth
            placeholderText:"insert your text"
        }
        TextField {
            style: TextFieldStyle {
                background: BorderImage {
                    source: "images/textfield.png"
                    border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
                }
            }
            implicitWidth: columnWidth
            placeholderText:"teset field2"
        }
        TextField {
            style: textFieldStyle
            implicitWidth: columnWidth
            placeholderText:"teset field3"
        }



        Item{
            Layout.fillHeight: true;
        }
    }

    property Component textFieldStyle: TextFieldStyle {
        background: Rectangle {
            implicitWidth: columnWidth
            color: "#f0f0f0"
            antialiasing: true
            border.color: "gray"
            radius: height/2
            Rectangle {
                anchors.fill: parent
                anchors.margins: 1
                color: "transparent"
                antialiasing: true
                border.color: "#aaffffff"
                radius: height/2
            }
        }
    }
}
